<template>
  <div class>
    <crumbs attribute1="用户管理" attribute2="用户列表"></crumbs>

    <el-card class="box-card">
      <el-input class="elinput" @input="UserList()" placeholder="请输入内容" v-model="obj.query">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <el-button type="primary" style="margin-left:20px;" @click="dialogVisible = true">添加用户</el-button>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="#" width="80" type="index"></el-table-column>
        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色" width="180"></el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <div>
              <el-switch
                @change="fun(scope.row.id,scope.row.mg_state)"
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="220">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="exit(scope.row.id,scope.row.username,scope.row.email,scope.row.mobile,rulen)"
            ></el-button>
            <el-button
              size="mini"
              type="primary"
              style="backgroundColor:#f56c6c;border:none"
              @click="del(scope.row.id)"
              icon="el-icon-delete"
            ></el-button>
            <el-button
              size="mini"
              @click="Roleopen(scope.row.username,scope.row.role_name,scope.row.id)"
              type="primary"
              style="backgroundColor:#e6a23c;border:none"
              icon="el-icon-setting"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="obj.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="obj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <el-dialog title="添加用户" :visible.sync="dialogVisible" width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="姓名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="Addlist('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>

      <!-- //编辑用户 -->
      <el-dialog title="编辑用户" :visible.sync="dialogVisibles" width="30%">
        <el-form :model="ruleForms" :rules="rulen" ref="ruleForms" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForms.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForms.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="mobile">
            <el-input v-model="ruleForms.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibles = false">取 消</el-button>
          <el-button type="primary" @click="exitok('ruleForms')">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分配角色 -->
      <el-dialog title="提示" :visible.sync="flag" width="30%">
        <div class="content">
          <p>
            当前用户：
            <span>{{ curren_username }}</span>
          </p>
          <p>
            当前角色：
            <span>{{ curren_role_name }}</span>
          </p>
          <p>
            当前角色ID：
            <span>{{ currentRoleId }}</span>
          </p>
          <span style="margin-right: 10px">分配新角色:</span>
          <el-select v-model="currentRoleId" placeholder="请选择">
            <el-option
              v-for="item in RoleData"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="flag = false">取 消</el-button>
          <el-button type="primary" @click="RoleOk()">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getTablist,
  AddLists,
  DeleteApi,
  UpdateStatus,
  UpdateContent,
  getRole,
  getRoleAuth
} from "../http/api";
import _ from "lodash";
export default {
  created() {
    this.getData();
  },

  data() {
    return {
      flag: false,
      rulen: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            pattern: "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$",
            message: "邮箱格式不正确",
            trigger: "blur"
          }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: "^[1][3,4,5,6,7,8,9][0-9]{9}$",
            message: "手机号格式不正确",
            trigger: "blur"
          }
        ]
      },
      rules: {
        username: [
          { required: true, message: "请输入新用户名", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户输入范围在5~20个字符之间",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "密码输入范围在5~20个字符之间",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            pattern: "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$",
            message: "邮箱格式不正确",
            trigger: "blur"
          }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: "^[1][3,4,5,6,7,8,9][0-9]{9}$",
            message: "手机号格式不正确",
            trigger: "blur"
          }
        ]
      },
      ruleForm: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      ruleForms: {
        username: "",
        email: "",
        mobile: ""
      },
      dialogVisible: false,
      dialogVisibles: false,
      obj: {
        query: "",
        pagenum: 1,
        pagesize: 5
      },
      tableData: [],
      total: 0,
      id: 0,
      exitid: 0,
      RoleData: [],
      curren_username: "",
      curren_role_name: "",
      currentRoleId: "",
      jueseId: ""
    };
  },
  mounted() {},
  methods: {
    Roleopen(username, role_name, id) {
      this.flag = true;
      getRole().then(res => {
        console.log(res);
        this.RoleData = res;
      });
      this.jueseId = id;
      this.curren_username = username;
      this.curren_role_name = role_name;
    },
    RoleOk() {
      this.flag = false;
      getRoleAuth(this.jueseId, this.currentRoleId).then(res => {
        console.log(res);
      });
    },
    exit(id, username, email, mobile) {
      this.dialogVisibles = true;
      this.exitid = id;
      this.ruleForms.username = username;
      this.ruleForms.email = email;
      this.ruleForms.mobile = mobile;
    },
    fun(uid, type) {
      UpdateStatus({ uid, type }).then(res => {
        this.getData();
      });
    },
    del(id) {
      console.log(id);

      this.id = id;
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let res = DeleteApi(this.id);
          this.getData();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    exitok(ruleForms) {
      this.dialogVisibles = false;

      this.$refs[ruleForms].validate(bool => {
        if (!bool) return;
        UpdateContent({
          id: this.exitid,
          email: this.ruleForms.email,
          mobile: this.ruleForms.mobile
        }).then(res => {
          console.log(res);
          this.getData();
        });
      });
    },

    Addlist(ruleForm) {
      this.dialogVisible = false;
      this.$refs[ruleForm].validate(bool => {
        if (!bool) return;
        AddLists(this.ruleForm).then(res => {
          this.getData();
        });
      });
    },
    UserList: _.debounce(function() {
      this.getData();
    }, 500),
    handleSizeChange(val) {
      this.obj.pagesize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.obj.pagenum = val;
      this.getData();
    },
    getData() {
      getTablist(this.obj).then(res => {
        console.log(res);

        const { users, total } = res;
        this.tableData = users;
        this.total = total;
      });
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.el-table {
  margin: 20px 0;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
}

.elinput {
  width: 500px;
}
</style>
